let layer = layui.layer;
let laypage = layui.laypage

// 声明分页需要的请求参数
query={
    limit:8,
    page:1,
    tagname:''
}
// map渲染 包装调用
async function render() {
    // { status, data: { data, errmsg } }
    // 
    const {data:{data}} = await axios.get('/ydd_tag/list',{params:query})

    const newStr = data.data.map((item, index) => {
        const { id, tagname} = item
        return `<tr>
        <td>${index+1}</td>
        <td>${id}</td>
        <td>${tagname}</td>
        
        <td>
          <button type="button" id='del' class="layui-btn layui-btn-xs layui-btn-warm btn_edit fa fa-edit" data-id=${id}>编辑</button>
          <button type="button" id='del' class="layui-btn layui-btn-danger layui-btn-xs btn_delete fa fa-trash" data-id=${id}>删除</button>
        </td>
      </tr>
    `
    }).join('')
    // console.log(newStr);
    document.querySelector('#list').innerHTML = newStr
    // 调用参数传递下去
    renderPage(data.count)
    // console.log(data.count);
}
render()
// 删除按钮
document.querySelector('#list').addEventListener('click', async function (e) {
    if (e.target.className === 'layui-btn layui-btn-danger layui-btn-xs btn_delete fa fa-trash') {
        const id = e.target.dataset.id
        const  {data:{data,errmsg}} = await axios.get(`/ydd_tag/del`, { params: { id: id } })
        // console.log(res);
        if (errmsg === '') {
             
            return render(),layer.msg('删除成功')
        }
        
        layer.msg(errmsg)
    }
})

// 新增弹出层
let indexAddForm
document.querySelector('.layui-btn-normal').addEventListener('click', function () {
    let addFormStr = `
    <form id="addFormi" class="layui-form">
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item maggin">
                <label class="layui-form-label">标签名称</label>
                <div class="layui-input-block">
                  <input type="text" id='two' name="tagname" required  lay-verify="required" placeholder="请输入标签" autocomplete="off" class="layui-input">
    </div>
   

    </div>
            <!-- 第三行 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn magg" lay-submit lay-filter="formDemo" id="newa">确认添加</button>
                  
    </div>
    </div>
</form>`
    indexAddForm = layer.open({
        title: ['添加标签', 'font-size:20px'],
        type: 1,
        area: ['500px', '200px'],
        anim: 2,
        content: addFormStr
    });
    
    // 数据提交
    // const newa = document.querySelector('#new')
    $('body').on('submit', '#addFormi', async function (e) {
        e.preventDefault()
        let data = $(this).serialize()
        
        //  console.log(data);
        const { data: { errmsg } } = await axios.post('/ydd_tag/add', data)
        // if (status !== 200) {
        //     return layer.msg(errmsg)
        // }
        layer.msg('添加成功')
        layer.close(indexAddForm)
        render()


    })


})

// 编辑弹出层
let form = layui.form;
let addFormStr = `
<form id="editForm" class="layui-form" lay-filter="editdForm">
<div class="layui-form-item layui-hide">
            <label class="layui-form-label">编辑分类</label>
            <div class="layui-input-block">
              <input type="text"  name="id" required  lay-verify="required" placeholder="请输入分类" autocomplete="off" class="layui-input">
</div>
</div>

        <!-- 第一行 分类名称 -->
        <div class="layui-form-item maggin">
            <label class="layui-form-label">编辑分类</label>
            <div class="layui-input-block">
              <input type="text" id='two' name="tagname" required  lay-verify="required" placeholder="请输入分类" autocomplete="off" class="layui-input">
</div>



        <!-- 第三行 按钮  lay-filter="formDemo" -->
        <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn magg" lay-submit  id="newa">确认修改</button>
              
</div>
</div>
</form>`
let indexXForm
// 提交编辑事件
$('#list').on('click', '.btn_edit', async function () {
    indexXForm = layer.open({
        title: ['修改标签', 'font-size:20px'],
        type: 1,
        area: ['500px', '200px'],
        anim: 2,
        content: addFormStr
    });

    const id = $(this).attr('data-id')//id可以显示出来

    const { data: { data } } = await axios.get('/ydd_tag/rowInfo', { params: { id: id } })
    form.val("editdForm", data)
    // console.log(data);

    $('body').on('submit', '#editForm', async function (e) {
        e.preventDefault()
        let dataa = $(this).serialize()

        // console.log(dataa);

        const res = await axios.post('/ydd_tag/update', dataa)
        // if (status !== 200) {
        //     return layer.msg(errmsg)
        // { status, data: { errmsg } } }
        // console.log(res);
        layer.msg('修改成功')
        layer.close(indexXForm)
        render()


    })

})
// 分页
function renderPage(count) {

    laypage.render({
        elem: 'page-box',
        // 获取调用的count参数
        count:count,//数据总数，从服务端得到

        limit: query.limit,//每页显示的条数
        curr: query.page,// 起始页
        limits: [2, 4, 8],//每页条数的选择项
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            query.page = obj.curr
            query.limit = obj.limit

            //首次不执行
            if (!first) {
                //do something
                // page() 
                render()
                //点击切换的时候执行，发请求
            }
        }
    })

}
// 搜索功能
$('.search').on('click',function(){
    const content = $('#val').val()
    query.tagname =  content
    render()
})
// 重置功能
$('.reset').on('click',function(){
    // 点击时刷新
    $('#Refresh').click()
})
// 文件导出功能
// function exportFile() {
//     // 创建一个文本字符串，并设置相关的参数
//     const data = "导出的文件内容";
    
//     // 利用URL.createObjectURL方法创建一个指向data的Blob URL
//     const blob = new Blob([data], { type: "text/plain;charset=utf-8" });
//     const blobURL = URL.createObjectURL(blob);
    
//     // 创建一个a标签，设置相关属性，并模拟点击a标签下载文件
//     const a = document.createElement("a");
//     a.download = "标签目录.xlsx";
//     a.href = blobURL;
//     a.click();
  
//     // 释放URL.createObjectURL方法创建的URL对象
//     setTimeout(() => {
//       URL.revokeObjectURL(blobURL);
//     }, 0);
//   }

$('#dao').click(function () {
    var table = document.getElementById("tabInfo")
    var data = []
    for (var i = 0, row; row = table.rows[i]; i++) {
        var rowData = []
        for (var j = 0, col; col = row.cells[j]; j++) {
            rowData.push(col.innerText)
        }
        data.push(rowData)
    }
    // 创建工作簿
    var workbook = XLSX.utils.book_new()

    // 创建工作表
    var worksheet = XLSX.utils.aoa_to_sheet(data)

    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")

    // 导出工作簿为 Excel 文件
    XLSX.writeFile(workbook, "数据.xlsx")
})



  $('.b1').on('click',function(){
    $('.left').toggleClass('hiden')
 })
 // 搜索刷新按钮
 $('.b2').on('click',function(){
     
    // const content = $('#val').val()
    // query.tagname =  content
    // render()
     $('#Refresh').click()
 })